<script>
//构建字段
function builderTableColumns(resData) {
    // console.log(resData);
    var columns = [];
    //是否显示单选框
    if(!resData.hide_radio){
        columns = columns.concat({ type: 'radio', title: '单选', fixed: 'left' }); 
    }
    //是否显示复选框
    if (!resData.hide_checkbox) {
        columns = columns.concat({ type: 'checkbox', title: '全选', fixed: 'left' });
    }
    $(".image_css").remove();
    //构建后台创建的字段
    for(var i=0; i<resData.columns.length; i++){
        switch(resData.columns[i].type){
            case 'normal':
            case 'text':
                columns = columns.concat({ 
                    field: resData.columns[i].name,
                    title: resData.columns[i].title,
                    width: resData.columns[i].params.width,
                    sort: resData.columns[i].params.sort,
                    minWidth: resData.columns[i].params.minWidth,
                    align: resData.columns[i].params.align,
                    unresize: resData.columns[i].params.unresize,
                    type:'normal',
                    style: resData.columns[i].params.style,
                    fixed: resData.columns[i].params.fixed,
                    event: resData.columns[i].params.event == ''?'row_drag': resData.columns[i].params.event,
                    totalRow: resData.columns[i].params.totalRow,
                    totalRowText: resData.columns[i].params.totalRowText,
                });
                break;
            case "image":    
            case 'images':
                var index = resData.hide_checkbox?1:2;
                var css = "<style class='image_css'>.layui-table tr td:nth-child("+(i+index)+") .layui-table-cell img{width:90px;height:90px;}.layui-table tr td:nth-child("+(i+index)+") .layui-table-cell {height: 90px !important;}.layui-table tr{height:101px !important}, .layui-table tr td .layui-table-cell{height:auto !important} .layui-table tr td:first-child{height:91px !important;} .layui-table-view .layui-form-checkbox[lay-skin=primary] i {height: 17px !important;}</style>"
                $("body").append(css);

                var alt_field = resData.columns[i].params.alt_field;//主标题 以某个字段作为主标题 优先级次于固定的主标题
                var alt = resData.columns[i].params.alt;//固定的主标题 优先级最高
                var alt_title = resData.columns[i].title;//主标题 优先级最低 --- 多图的其他标题 如果没有设置 则以主标题为标题
                var image = resData.columns[i].name; //主图字段 
                var images = resData.columns[i].params.images_field;//多图：数据中的多图字段 其数据以英文逗号分割
                var alts = resData.columns[i].params.alts_field;//多图对应的名称 ：数据中的多图对应名称字段 其数据以英文逗号分割

                columns = columns.concat({
                    field: resData.columns[i].name,
                    title: resData.columns[i].title,
                    width: resData.columns[i].params.width,
                    sort: resData.columns[i].params.sort,
                    minWidth: resData.columns[i].params.minWidth,
                    align: resData.columns[i].params.align,
                    unresize: resData.columns[i].params.unresize,
                    type: 'normal',
                    style: resData.columns[i].params.style,
                    fixed: resData.columns[i].params.fixed,
                    event: resData.columns[i].params.event,
                    totalRow: resData.columns[i].params.totalRow,
                    totalRowText: resData.columns[i].params.totalRowText,
                    templet: function (d) {
                        
                        //设置主标题
                        var img_alt = alt;
                        if(alt == undefined || alt == ''){
                            if (d[alt_field] != undefined) {
                                img_alt = d[alt_field];
                            }else{
                                img_alt = alt_title;
                            }
                        }
                        var imgs_alt = d[alts];
                        if(d[alts] == undefined){
                            imgs_alt = img_alt;
                        }

                        var imgs_src = d[image];
                        if(d[images] != undefined){
                            imgs_src = d[images];
                        }
                        var html = '<div id="layer-photos-demo" class="layer-photos-demo"><img onclick="javascript:layerImages(this);" layer-pid="" layer-src="'+ imgs_src +'" layer-alt="' + imgs_alt +'" src="'+d[image]+'" alt="'+ img_alt +'" /></div>';
                        return html;
                    }
                });
                 
                break; 
            case 'link':
                var link_url = resData.columns[i].params.url;
                var link_url_param_field = resData.columns[i].params.url_param_field;
                var link_url_param_extra_field = resData.columns[i].params.url_param_extra_field;
                var link = resData.columns[i].name;
                var is_hash_link =  resData.columns[i].params.is_hash;
                columns = columns.concat({
                    field: resData.columns[i].name,
                    title: resData.columns[i].title,
                    width: resData.columns[i].params.width,
                    sort: resData.columns[i].params.sort,
                    minWidth: resData.columns[i].params.minWidth,
                    align: resData.columns[i].params.align,
                    unresize: resData.columns[i].params.unresize,
                    type: 'normal',
                    style: resData.columns[i].params.style,
                    fixed: resData.columns[i].params.fixed,
                    event: resData.columns[i].params.event,
                    totalRow: resData.columns[i].params.totalRow,
                    totalRowText: resData.columns[i].params.totalRowText,
                    templet: function (d) {
                        var linkUrl = '';
                        if(is_hash_link){
                            //如果是hash 将以当前的链接作为基础链接 
                            linkUrl += window.location.pathname ;
                            if(link_url_param_field != '' && d[link_url_param_field] != undefined){
                                linkUrl += "?"+link_url_param_field+"="+d[link_url_param_field];
                            }
                            if(link_url_param_extra_field != '' && d[link_url_param_extra_field] != undefined){
                                if(linkUrl.indexOf('?')>0){
                                    linkUrl += "&"+link_url_param_extra_field+"="+d[link_url_param_extra_field];
                                }else{
                                    linkUrl += "?"+link_url_param_extra_field+"="+d[link_url_param_extra_field];
                                }
                            }
                            
                            linkUrl += (link_url.substr(0, 1) == "#" ? link_url : "#"+link_url);
                            
                        }else{
                            linkUrl += link_url+"?";
                            if(link_url_param_field != '' && d[link_url_param_field] != undefined){
                                linkUrl += link_url_param_field+"="+d[link_url_param_field];
                            }
                            if(link_url_param_extra_field != '' && d[link_url_param_extra_field] != undefined){
                                linkUrl += "&"+link_url_param_extra_field+"="+d[link_url_param_extra_field];
                            }
                        }
                        var html = '<a href="'+linkUrl+'">'+d[link]+'</a>';
                        // console.log(html);
                        return html;
                    }
                });
                break         
            case 'rate':
                var rate = resData.columns[i].name;
                columns = columns.concat({
                    field: resData.columns[i].name,
                    title: resData.columns[i].title,
                    width: resData.columns[i].params.width,
                    sort: resData.columns[i].params.sort,
                    minWidth: resData.columns[i].params.minWidth,
                    align: resData.columns[i].params.align,
                    unresize: resData.columns[i].params.unresize,
                    type: 'normal',
                    style: resData.columns[i].params.style,
                    fixed: resData.columns[i].params.fixed,
                    event: resData.columns[i].params.event,
                    totalRow: resData.columns[i].params.totalRow,
                    totalRowText: resData.columns[i].params.totalRowText,
                    templet: function (d) {
                        var html = '<ul class="layui-rate" style="padding:0 !important" readonly="">';
                        var length = parseInt(d[rate])>5 ? 5: parseInt(d[rate]);
                        // console.log(length);
                        for(var i = 0; i< length; i++){
                            html += '<li class="layui-inline"><i style="font-size:15px !important;" class="layui-icon layui-icon-rate-solid"></i></li>';
                        }
                        if((d['rate'] - parseInt(d[rate]) >= 0.5) && length <5){
                            html += '<li class="layui-inline"><i style="font-size:15px !important;" class="layui-icon layui-icon-rate-half"></i></li>';
                        }
                        html += '</ul>';
                        // console.log(html);
                        return html;
                    }
                });
                break;     
            case 'process':
                var process = resData.columns[i].name;
                columns = columns.concat({
                    field: resData.columns[i].name,
                    title: resData.columns[i].title,
                    width: resData.columns[i].params.width,
                    sort: resData.columns[i].params.sort,
                    minWidth: resData.columns[i].params.minWidth,
                    align: resData.columns[i].params.align,
                    unresize: resData.columns[i].params.unresize,
                    type: 'normal',
                    style: resData.columns[i].params.style,
                    fixed: resData.columns[i].params.fixed,
                    event: resData.columns[i].params.event,
                    totalRow: resData.columns[i].params.totalRow,
                    totalRowText: resData.columns[i].params.totalRowText,
                    templet: function (d) {
                        
                       var processResult = tableProcess(d[process]);
                       return '<div class="layui-progress" lay-showpercent="true" style="width:100%;"><div class="layui-progress-bar ' + processResult.processBg + '" lay-percent="' + processResult.value + '" style="width: ' + processResult.value + ';"><span class="layui-progress-text">' + processResult.value + '</span></div></div>' + processResult.value;
                                               
                    }
                });
                break;
            case 'icon':
                var icon = resData.columns[i].name;
                columns = columns.concat({
                    field: resData.columns[i].name,
                    title: resData.columns[i].title,
                    width: resData.columns[i].params.width,
                    sort: resData.columns[i].params.sort,
                    minWidth: resData.columns[i].params.minWidth,
                    align: resData.columns[i].params.align,
                    unresize: resData.columns[i].params.unresize,
                    type: 'normal',
                    style: resData.columns[i].params.style,
                    fixed: resData.columns[i].params.fixed,
                    event: resData.columns[i].params.event,
                    totalRow: resData.columns[i].params.totalRow,
                    totalRowText: resData.columns[i].params.totalRowText,
                    templet: function (d) {
                       return '<i style="margin-top:8px;" class="'+d[icon]+'"></i>';
                    }
                });
                break;     
            case 'edit':
                columns = columns.concat({
                    field: resData.columns[i].name,
                    title: resData.columns[i].title,
                    width: resData.columns[i].params.width,
                    sort: resData.columns[i].params.sort,
                    minWidth: resData.columns[i].params.minWidth,
                    align: resData.columns[i].params.align,
                    unresize: resData.columns[i].params.unresize,
                    type: 'normal',
                    edit:'text',
                    style: resData.columns[i].params.style,
                    fixed: resData.columns[i].params.fixed,
                    event: resData.columns[i].params.event,
                    totalRow: resData.columns[i].params.totalRow,
                    totalRowText: resData.columns[i].params.totalRowText,
                });
                break;
            case 'switch':
                var switchName = resData.columns[i].name,
                    switchOn = resData.columns[i].params.on,
                    switchOff = resData.columns[i].params.off,
                    switchUrl = resData.columns[i].params.url,
                    switchText = resData.columns[i].params.switch_text;
                columns = columns.concat({
                    field: resData.columns[i].name,
                    title: resData.columns[i].title,
                    width: resData.columns[i].params.width,
                    sort: resData.columns[i].params.sort,
                    minWidth: resData.columns[i].params.minWidth,
                    align: resData.columns[i].params.align,
                    unresize: resData.columns[i].params.unresize,
                    type: 'normal',
                    style: resData.columns[i].params.style,
                    fixed: resData.columns[i].params.fixed,
                    // event: resData.columns[i].params.event,
                    totalRow: resData.columns[i].params.totalRow,
                    totalRowText: resData.columns[i].params.totalRowText,
                    templet: function (d) {
                        // console.log(d);
                        var html = '';
                        if(d[switchName] == switchOn){
                            html = '<input type="checkbox" name="'+ switchName + '" lay-skin="switch" lay-filter="table-switch" data-field="' + switchName + '" data-value="' + d[switchName] + '" data-id="' + d.id + '" data-on="' + switchOn + '"  data-off="' + switchOff + '" data-url="' + switchUrl + '" lay-text="'+ switchText +'" checked />'; 
                        }   
                        if (d[switchName] == switchOff) {
                            html = '<input type="checkbox" name="' + switchName + '" lay-skin="switch"  lay-filter="table-switch"  data-field="' + switchName + '" data-value="' + d[switchName] + '" data-id="' + d.id + '" data-on="' + switchOn + '"  data-off="' + switchOff + '" data-url="' + switchUrl + '" lay-text="' + switchText + '" />';
                        }
                        if(html == ''){
                            html = '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" style="margin:3px 0">非法值</button>';
                        }
                        // console.log(html);
                        return html;
                    }
                });
                break;
            case 'switch_1':
                var switchName_1 = resData.columns[i].name,
                    switchOn_1 = resData.columns[i].params.on,
                    switchOff_1 = resData.columns[i].params.off,
                    switchUrl_1 = resData.columns[i].params.url,
                    switchText_1 = resData.columns[i].params.switch_text;
                columns = columns.concat({
                    field: resData.columns[i].name,
                    title: resData.columns[i].title,
                    width: resData.columns[i].params.width,
                    sort: resData.columns[i].params.sort,
                    minWidth: resData.columns[i].params.minWidth,
                    align: resData.columns[i].params.align,
                    unresize: resData.columns[i].params.unresize,
                    type: 'normal',
                    style: resData.columns[i].params.style,
                    fixed: resData.columns[i].params.fixed,
                    // event: resData.columns[i].params.event,
                    totalRow: resData.columns[i].params.totalRow,
                    totalRowText: resData.columns[i].params.totalRowText,
                    templet: function (d) {
                        // console.log(d[switchName_1]);
                        // console.log(switchName_1);
                        var html = '';
                        if(d[switchName_1] == switchOn_1){
                            html = '<input type="checkbox" name="'+ switchName_1 + '" lay-skin="switch" lay-filter="table-switch" data-field="' + switchName_1 + '" data-value="' + d[switchName_1] + '" data-id="' + d.id + '" data-on="' + switchOn_1 + '"  data-off="' + switchOff_1 + '" data-url="' + switchUrl_1 + '" lay-text="'+ switchText_1 +'" checked />'; 
                        }   
                        if (d[switchName_1] == switchOff_1) {
                            html = '<input type="checkbox" name="' + switchName_1 + '" lay-skin="switch"  lay-filter="table-switch"  data-field="' + switchName_1 + '" data-value="' + d[switchName_1] + '" data-id="' + d.id + '" data-on="' + switchOn_1 + '"  data-off="' + switchOff_1 + '" data-url="' + switchUrl_1 + '" lay-text="' + switchText_1 + '" />';
                        }
                        if(html == ''){
                            html = '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" style="margin:3px 0">非法值</button>';
                        }
                        // console.log(html);
                        return html;
                    }
                });
                break;    
            default:
                columns = columns.concat({
                    field: resData.columns[i].name,
                    title: resData.columns[i].title,
                    width: resData.columns[i].params.width,
                    sort: resData.columns[i].params.sort,
                    minWidth: resData.columns[i].params.minWidth,
                    align: resData.columns[i].params.align,
                    unresize: resData.columns[i].params.unresize,
                    type: 'normal',
                    style: resData.columns[i].params.style,
                    fixed: resData.columns[i].params.fixed,
                    event: resData.columns[i].params.event,
                    totalRow: resData.columns[i].params.totalRow,
                    totalRowText: resData.columns[i].params.totalRowText,
                });
                console.log("错误的构建的字段数据：" , resData.columns[i]);
                console.log("已自动将错误字段类型归类为normal类型.");
                console.log("当前支持的构建的字段有：text,normal,edit,image,images,switch,process,rate");
                break;    
        }
    }
    // console.log(columns);
  
   // 构建操作按钮
    if(resData.is_show_right_column){
        //操作按钮的宽度
        var rightButtonsWidth = 40;
        if(resData.is_show_edit){
            rightButtonsWidth += 60;
        }
        if(resData.is_show_delete){
            rightButtonsWidth += 60;
        }
        rightButtonsWidth += (60*resData.right_buttons.length);

        columns = columns.concat({
                    field: '',
                    title: resData.right_column_title,
                    width: rightButtonsWidth,
                    sort: false,
                    minWidth: '',
                    align: 'center',
                    unresize: false,
                    type: 'normal',
                    style: '',
                    fixed: 'right',
                    event: 'row_drag',
                    totalRow: false,
                    totalRowText: '',
                    templet:function(d){
                        var html = '';
                        //是否构建编辑按钮
                        if(resData.is_show_edit){
                            html += '<a class="layui-btn layui-btn-xs" lay-event="table_edit" title="' + resData.right_edit_title +'当前行">'+resData.right_edit_title+'</a>';
                        }
                       
                        //是否有额外的扩展按钮
                        for(var i = 0; i<resData.right_buttons.length; i++){
                            html += '<a class="layui-btn layui-btn-xs '+resData.right_buttons[i]['params']['class']+' '+resData.right_buttons[i]['event']+'" style="'+resData.right_buttons[i]['params']['style']+'" lay-event="'+resData.right_buttons[i]['event']+'">'+resData.right_buttons[i]['title']+'</a>';
                        }

                        // 判断是否构建删除字段
                        if(resData.is_show_delete){
                            html += '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete" title="' + resData.right_delete_title +'当前行">'+resData.right_delete_title+'</a>';
                        }
                        
                        //
                        return html;
                    }
                })
    }
    
    return columns;
}
    

</script>

<script>
//图片
function layerImages(othis,title){
    var imgs = ($(othis).attr("layer-src")).split(",");
    var alts = ($(othis).attr("layer-alt")).split(",");
    var alt = $(othis).attr("alt");
    var img = $(othis).attr("src");
    // console.log(imgs); console.log(alts); console.log(alt); console.log(img);
    var data = [];
    for(var i=0; i<imgs.length; i++){
        var alt_title = alt;
        if(alts[i] != undefined){
            alt_title = alts[i];
        }
        data = data.concat({
            "alt": alt_title,
            "pid": i, //图片id
            "src": imgs[i], //原图地址
            "thumb": imgs[i] //缩略图地址
        })
    }
    layer.photos({
        photos: {
            "title": alt, //相册标题
            "id": 0, //相册id
            "start": 0, //初始显示的图片序号，默认0
            "data": data
        }, 
        anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
    });
}
//进度条
function tableProcess(value) {
    if(value == undefined){
        return {value:0, processBg:'layui-bg-red'}
    }
    var value = value.toString();
    var processBg = "layui-bg-blue";
    if (value.indexOf("%") > 0) {
        var arr = value.split('%');
        if (((arr[0]) / 100).toFixed(2) < 0.5) {
            processBg = "layui-bg-red";
        }
        if (((arr[0]) / 100).toFixed(2) < 0.5) {
            processBg = "layui-bg-red";
        }
        if (((arr[0]) / 100).toFixed(2) > 0.99) {
            processBg = "layui-bg-green";
        }
    }
    if (value.indexOf("/") > 0) {
        var arr = value.split('/');
        value = ((arr[0] / arr[1]) * 100).toFixed(2) + '%';
        if ((arr[0] / arr[1]) < 0.5) {
            processBg = "layui-bg-red";
        }
        if ((arr[0] / arr[1]) > 0.99) {
            processBg = "layui-bg-green";
        }
    }

    if (value.indexOf("0.") == 0) {
        if ((value) < 0.5) {
            processBg = "layui-bg-red";
        }
        if ((value) > 0.99) {
            processBg = "layui-bg-green";
        }
        value = ((value) * 100).toFixed(2) + '%';
    }

    if (value.indexOf("0.") != 0 && value.indexOf("/") < 1 && value.indexOf("%") < 1) {
        value = ((value) * 100).toFixed(2) + '%';
    }

    return { value: value, processBg: processBg };
}
</script>
